<template>
    <view class="return-cart-bar">
        <view class="bottom-bar">
            <view class="cart-left">
                <view class="cart-rel" @click="cartShow">
                    <uni-badge
                        size="small"
                        :text="total.totalNum"
                        absolute="rightTop"
                        type="error"
                        :offset="[-60, -45]"></uni-badge>
                    <uni-icons size="40" type="cart" customIcons="icon-white"></uni-icons>
                </view>
                <view class="cart-kind">
                    <text class="cart-price"
                        >￥<text>{{ total.totalPrice }}</text></text
                    >
                    <text class="kind">{{ total.class }}种{{ total.totalNum }}件</text>
                </view>
            </view>

            <view class="cart-right" v-if="tempType == 21">
                <button
                    class="btn btn-success"
                    @click="buyNow"
                    :class="isDisable(getTempCartData) ? 'disable' : ''"
                    :disabled="isDisable(getTempCartData)">
                    立即购买
                </button>
            </view>
        </view>
        <uni-popup type="bottom" ref="cart" @change="close" background-color="#fff" :safe-area="false">
            <view class="popup-content">
                <view class="popup-title">
                    <text class="popup-title-text">已选商品</text>
                    <text class="popup-title-action" @click="closePopup">清空</text>
                </view>
                <scroll-view scroll-y="true" class="scroll">
                    <view
                        class="cart-item"
                        v-if="!refresh"
                        v-show="cartItem.amount > 0"
                        v-for="(cartItem, index) in getTempCartData"
                        :key="cartItem.id">
                        <cart-item-product :productData="cartItem"></cart-item-product>
                        <cart-item-specs :spaceItem="cartItem"></cart-item-specs>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations, mapState, mapGetters } from "vuex"
import cartItemProduct from "@/pages_shop/components/bottomCart/cart-item-product.vue"
import cartItemSpecs from "@/pages_shop/components/bottomCart/cart-item-specs.vue"

import {
    getRefundOrderTempList,
    deleteRefundOrderTemp,
    getTempCartTotalForAct,
    upTempCartForActivityFn,
} from "@/utils/tempCartUtil.js"
export default {
    name: "returnSalesCart",
    components: {
        cartItemProduct,
        cartItemSpecs,
    },
    props: {
        tempType: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            cartOpen: false,
            cartList: [],
            total: {
                totalNum: 0,
                totalPrice: 0,
                class: 0,
            },
            refresh: false,
        }
    },
    watch: {
        getTempCartData(e) {
            this.getTotal()
            this.$forceUpdate()
        },
    },
    computed: {
        ...mapGetters(["getTempCartData"]),
    },
    mounted() {
        if (this.tempType == 0) {
            this.getRefundOrderTempList()
        }
        this.getTotal()
    },
    methods: {
        getTotal() {
            getTempCartTotalForAct(this.getTempCartData, (back) => {
                this.total = {
                    totalNum: back.totalNum,
                    totalPrice: back.totalPrice,
                    class: back.class,
                }
            })
        },
        getRefundOrderTempList() {
            getRefundOrderTempList().then((res) => {})
        },
        cartShow() {
            this.cartOpen = !this.cartOpen
            if (this.cartOpen) {
                this.$refs.cart.open()
            } else {
                this.$refs.cart.close()
            }
        },
        close(e) {
            if (e.show == false) {
                this.cartOpen = false
            }
        },
        closePopup() {
            upTempCartForActivityFn([])
        },
        isDisable(data) {
            let disable = !data || data.length < 1
            let hasnone = false
            let amount = 0
            if (data.length > 0) {
                data.forEach((e) => {
                    amount += e.amount
                })
            }
            return disable || amount == 0
        },
        buyNow() {
            this.$emit("buyNow", "")
        },
    },
}
</script>

<style lang="scss" scoped>
.return-cart-bar {
    position: relative;
    z-index: 1;
}

.bottom-bar {
    z-index: 100;
    justify-content: space-between;
    padding: 0 $app-page-padding;
    .cart-rel {
        position: relative;
        width: 80rpx;
        height: 80rpx;
        background: $app-color-main;
        border-radius: 50%;
        border: 6rpx solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cart-right {
        display: flex;
        align-items: center;
        .btn {
            border-radius: 100rpx;
        }
    }

    .price {
        font-size: $font-size-28;

        text {
            font-size: $font-size-32;
            font-weight: 500;
            color: #fe0000;
        }
    }

    .btn {
        width: 220rpx;
        padding: 0;
    }
}

// 弹窗组件
.popup-content {
    width: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #f5f5f5;
    border-radius: 40rpx 40rpx 0 0;
    padding-right: $app-page-padding;
    padding-left: $app-page-padding;
    padding-bottom: 120rpx;
    z-index: 0;

    .popup-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;

        .popup-title-text {
        }

        .popup-title-action {
        }
    }

    .scroll {
        max-height: 700rpx;

        .cart-item {
            background: $color-white;
            padding: 0 $app-page-padding;
            border-radius: $border-radius-10;
            margin-bottom: 20rpx;
        }
    }
}
.cart-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.cart-kind {
    display: flex;
    flex-direction: column;
    margin-left: $app-page-padding;
    .cart-price {
        font-size: $font-size-24;
        text {
            font-size: $font-size-36;
            font-weight: 700;
        }
    }
    .kind {
        color: $color-orange-1;
    }
}
</style>
